<template>
  <div class="page-main">
    <el-breadcrumb class="breadcrumb">
      <el-breadcrumb-item>店主商店</el-breadcrumb-item>
      <el-breadcrumb-item>通知列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-content">
      <div class="box-card">
        <span style="color: #101010; font-size: 16px">通知列表</span>
      </div>
      <div class="box-body">
        <div class="search">
          <div>
            <el-input
                placeholder="请输入操作人名字"
                prefix-icon="el-icon-search"
                v-model="status.keywords"
                style="width: 250px; margin-right: 20px"
                clearable
                @keyup.enter="getNoticeList"
                @clear="getNoticeList"
            />
            <el-date-picker
                v-model="status.date"
                value-format="YYYY-MM-DD"
                style="width: 250px; margin-right: 20px"
                type="date"
                placeholder="选择日期"
                @change="getNoticeList"
            />
            <el-select v-model="status.state" @change="getNoticeList">
              <el-option label="全部" :value="null"/>
              <el-option v-for="item in managerOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="getNoticeList()"
                style="margin-left: 10px"
            >
              搜索
            </el-button>
          </div>
        </div>
        <div class="table">
          <el-table :data="status.noticeList" style="width: 100%" v-loading="status.ifLoading">
            <el-table-column type="index" align="center" />
            <el-table-column prop="performerName" label="执行者名字" align="center" />
            <el-table-column prop="passiveId" label="被执行ID" align="center" />
            <el-table-column prop="passiveName" label="被执行名字" align="center" />
            <el-table-column prop="createTime" label="操作时间" align="center" />
            <el-table-column label="具体操作" align="center">
              <template #default="scope">
                <div v-if="scope.row.type === 1">修改商店信息</div>
                <div v-else-if="scope.row.type === 2">上架商店</div>
                <div v-else-if="scope.row.type === 3">下架商店</div>
                <div v-else-if="scope.row.type === 4">修改菜品信息</div>
                <div v-else-if="scope.row.type === 5">删除菜品</div>
                <div v-else-if="scope.row.type === 6">退单</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-div">
          <el-pagination
              v-model:currentPage="pageStatus.currentPage"
              v-model:page-size="pageStatus.pageSize"
              :page-sizes="[5, 10, 20]"
              :pager-count="5"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageStatus.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {managerOptions} from "@/tool/options";
import {nextTick, onMounted, reactive} from "vue";
import {httpPostManage} from "@/api/httpService";

const status = reactive({
  ifLoading: false,
  keywords: "",
  date: "",
  state: null,
  noticeList: []
});

const getNoticeList = async () => {
  status.ifLoading = true;
  let url = "/getAllNotice";
  let params = {
    keywords: status.keywords,
    date: status.date,
    state: status.state,
    currentPage: pageStatus.currentPage,
    pageSize: pageStatus.pageSize
  }
  let res = await httpPostManage(url, params);
  status.noticeList = res.data.data;
  pageStatus.total = res.data.total;
  await nextTick(() => {
    status.ifLoading = false;
  })
};

/**
 * 分页模块
 **/
//#region 分页模块
const pageStatus = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

//改变每页页数
const handleSizeChange = (val) => {
  pageStatus.pageSize = val;
  getNoticeList();
};

//改变当前页
const handleCurrentChange = (val) => {
  pageStatus.currentPage = val;
  getNoticeList();
};

onMounted(async () => {
  await getNoticeList();
})
</script>

<style lang="scss" scoped>
@import "../../assets/style/layout.scss";
</style>